<template>
	<view class="content" :style="styleobj" id="content">
		<view class="topbtn">
			<image src="../../static/img/quebtn.png" class="quebtn" mode="widthFix"></image>
			<view class="no">
				<text>0{{nowQuesNum}}</text>/08
			</view>
		</view>
		<view class="mainact" :style="{height:height}">
			<image :src='nowbg' mode="widthFix" ref="bg"></image>
		</view>
		<view class="question" v-html="question">

		</view>
		<view class="queslist">
			<image v-for="item in nowlist" :src=item.src @tap='choseAsw(item.a)' :key='item.a' mode="widthFix"></image>
		</view>
		<image class="stopmusic" @click="stopmusic" id="stop"
			src="https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/1/icon-muisc.png"  >
		</image>
		<image v-for="(item,index) in bglist" :key='index' :src="item" style="display: none;" mode=""></image>
		<image v-for="(item,index) in bgilist" :key='index' :src="item" style="display: none;" mode=""></image>
	</view>
</template>

<script>
	import wx from '../../weixin-js-sdk'
	import music from '../../tools/music.js'
	import {
		getshareinfo
	} from '../../tools/api.js'
	export default {
		data() {
			return {
				musicshow: true,
				styleobj: {
					height: '',
				},
				questionlist: {
					a: '你现在的生活状态是...',
					b: '目前你最强烈的感受是... ',
					c: '“生命在于运动”&nbsp;对于这句话<br/>你的看法是...',
					d: '如果从今日起开始要求你运动<br/>你的内心是.....',
					e: '你现在日常主要的运动是.....',
					f: '对于运动，你做过最大的努力是',
					g: '作为运动达人or躺平达人<br/>你运动是为了.....',
					h: '请挑选一类你比较喜欢的动作 '
				},
				question: '你现在的生活状态是...',
				bgi: '../../static/img/01/bga.png',
				height: '',
				nowQuesNum: 1,
				nowlist: [],
				answlist: [],
				nowbg: '/static/img/01/bg.png',
				bglist: {
					a: 'http://h5.sino-sources.com/h5/2/img/01/bg.png?x-oss-process=style/app',
					b: 'http://h5.sino-sources.com/h5/2/img/02/bg.png?x-oss-process=style/app',
					c: 'http://h5.sino-sources.com/h5/2/img/03/bg.png?x-oss-process=style/app',
					d: 'http://h5.sino-sources.com/h5/2/img/04/bg.png?x-oss-process=style/app',
					e: 'http://h5.sino-sources.com/h5/2/img/05/bg.png?x-oss-process=style/app',
					f: 'http://h5.sino-sources.com/h5/2/img/06/bg.png?x-oss-process=style/app',
					g: 'http://h5.sino-sources.com/h5/2/img/07/bg.png?x-oss-process=style/app',
					h: 'http://h5.sino-sources.com/h5/2/img/08/bg.png?x-oss-process=style/app'
				},
				bgilist: {
					a: 'http://h5.sino-sources.com/h5/2/img/01/bga.png?x-oss-process=style/app',
					b: 'http://h5.sino-sources.com/h5/2/img/02/bgb.png?x-oss-process=style/app',
					c: 'http://h5.sino-sources.com/h5/2/img/03/bgc.png?x-oss-process=style/app',
					d: 'http://h5.sino-sources.com/h5/2/img/04/bgd.png?x-oss-process=style/app',
					e: 'http://h5.sino-sources.com/h5/2/img/05/bge.png?x-oss-process=style/app',
					f: 'http://h5.sino-sources.com/h5/2/img/06/bgf.png?x-oss-process=style/app',
					g: 'http://h5.sino-sources.com/h5/2/img/07/bgg.png?x-oss-process=style/app',
					h: 'http://h5.sino-sources.com/h5/2/img/08/bgh.png?x-oss-process=style/app'
				},
				queslist: {
					a: [{
						a: 'A',
						src: '../../static/img/01/A.png'
					}, {
						a: 'B',
						src: '../../static/img/01/B.png'
					}, {
						a: 'C',
						src: '../../static/img/01/C.png'
					}, {
						a: 'D',
						src: '../../static/img/01/D.png'
					}],
					b: [{
						a: 'A',
						src: '../../static/img/02/A.png'
					}, {
						a: 'B',
						src: '../../static/img/02/B.png'
					}, {
						a: 'C',
						src: '../../static/img/02/C.png'
					}, {
						a: 'D',
						src: '../../static/img/02/D.png'
					}],
					c: [{
						a: 'A',
						src: '../../static/img/03/A.png'
					}, {
						a: 'B',
						src: '../../static/img/03/B.png'
					}, {
						a: 'C',
						src: '../../static/img/03/C.png'
					}, {
						a: 'D',
						src: '../../static/img/03/D.png'
					}],
					d: [{
						a: 'A',
						src: '../../static/img/04/A.png'
					}, {
						a: 'B',
						src: '../../static/img/04/B.png'
					}, {
						a: 'C',
						src: '../../static/img/04/C.png'
					}, {
						a: 'D',
						src: '../../static/img/04/D.png'
					}],
					e: [{
						a: 'A',
						src: '../../static/img/05/A.png'
					}, {
						a: 'B',
						src: '../../static/img/05/B.png'
					}, {
						a: 'C',
						src: '../../static/img/05/C.png'
					}, {
						a: 'D',
						src: '../../static/img/05/D.png'
					}],
					f: [{
						a: 'A',
						src: '../../static/img/06/A.png'
					}, {
						a: 'B',
						src: '../../static/img/06/B.png'
					}, {
						a: 'C',
						src: '../../static/img/06/C.png'
					}, {
						a: 'D',
						src: '../../static/img/06/D.png'
					}],
					g: [{
						a: 'A',
						src: '../../static/img/07/A.png'
					}, {
						a: 'B',
						src: '../../static/img/07/B.png'
					}, {
						a: 'C',
						src: '../../static/img/07/C.png'
					}, {
						a: 'D',
						src: '../../static/img/07/D.png'
					}],
					h: [{
						a: 'A',
						src: '../../static/img/08/A.png'
					}, {
						a: 'B',
						src: '../../static/img/08/B.png'
					}, {
						a: 'C',
						src: '../../static/img/08/C.png'
					}, {
						a: 'D',
						src: '../../static/img/08/D.png'
					}]
				}
			};
		},
		created() {
			this.nowlist = this.queslist.a
			this.nowbg = this.bglist.a
		},
		onLoad() {
			this.musicshow = uni.getStorageSync('musicplay')
		},
		async mounted() {
			if(this.musicshow){
				document.getElementById('stop').style.animationPlayState='paused'
				console.log(12313213)
			}
			this.styleobj.height = (document.body.clientWidth * 1920) / 1080 + 'px'
			var url = location.href.split('#')[0]
			const res = await getshareinfo(url)
			const appId = 'wx81cca98415403b17'
			wx.config({
				debug: false,
				appId: appId,
				timestamp: res.timestamp,
				nonceStr: res.nonceStr,
				signature: res.signature,
				jsApiList: [
					// 需要使用的JS接口列表,分享默认这几个，如果有其他的功能比如图片上传之类的，需要添加对应api进来
					'checkJsApi',
					'onMenuShareTimeline',
					'onMenuShareAppMessage',
					'onMenuShareQQ',
					'onMenuShareWeibo',
					'onMenuShareQZone',
					'hideMenuItems',
					'showMenuItems',
					'hideAllNonBaseMenuItem',
					'showAllNonBaseMenuItem',
					'updateAppMessageShareData',
					'updateTimelineShareData'
				]
			})
			const shareconfig = {
				share: {
					imgUrl: 'https://sino-sources.com/test2/static/front.png',
					desc: `有一种哲学叫做“躺平学”,有一种青年自称“ 躺平青年”,快来围观你的躺平姿势!`, // 摘要,如果分享到朋友圈的话，不显示摘要。
					title: '扶起躺平的你 ', // 分享卡片标题
					link: url, // 分享出去后的链接，这里可以将链接设置为另一个页面。
					success: function(e) {
						// 分享成功后的回调函数
					},
					cancel: function(e) {
						// 用户取消分享后执行的回调函数
					}
				}
			}
			wx.ready(function() {
				wx.onMenuShareAppMessage(shareconfig.share) // 分享给好友
				wx.onMenuShareTimeline(shareconfig.share) // 分享到朋友圈
				wx.onMenuShareQQ(shareconfig.share) // 分享给手机QQ
			})
		},
		methods: {
			preloadImg(list) {
			    var imgs = arguments[1] || [],    //用于存储预加载好的图片资源
			        fn = arguments.callee;
			    if(list.length == 0) {
			        return imgs;
			    }
			    var img = new Image();
			    img.src = list[0];
			    if(img.complete) {
			        imgs.push(img);
			        list.shift();
			        fn(list, imgs);
			    }
			    else {
			        img.onload = function() {
			            imgs.push(img);
			            list.shift();
			            fn(list, imgs);
			        };
			    }
			},
			stopmusic() {
				this.musicshow = !this.musicshow
				if(this.musicshow){
					document.getElementById('stop').style.animationPlayState='paused'
				}else{
					document.getElementById('stop').style.animationPlayState='running'
				}
				uni.setStorageSync('musicplay', this.musicshow)
				music.playBgm({
					mute: this.musicshow
				})
			},
			choseAsw(ans) {
				uni.showLoading({
					title:'加载中'
				})
				// 组装一个答案对象
				const aobj = {
					answer: ans,
					score: ans == 'A' ? 0 : ans == 'B' ?
						1 : ans == 'C' ?
						2 : 3,
					num: this.nowQuesNum
				}
				// 放到答案数组里
				let list = this.answlist
				list.push(aobj)
				this.answlist = list
				this.nowQuesNum = this.nowQuesNum + 1
				if (this.nowQuesNum == 1) {
					this.nowlist = this.queslist.a
					this.nowbg = this.bglist.a
					this.bgi = this.bgilist.a
					this.question = this.questionlist.a
				} else if (this.nowQuesNum == 2) {
					this.nowlist = this.queslist.b
					this.nowbg = this.bglist.b
					this.question = this.questionlist.b
					document.getElementById('content').style.backgroundImage =
						'url(http://h5.sino-sources.com/h5/2/img/02/bgb.png)'
				} else if (this.nowQuesNum == 3) {
					this.nowlist = this.queslist.c
					this.nowbg = this.bglist.c
					this.bgi = this.bgilist.c
					this.question = this.questionlist.c
					document.getElementById('content').style.backgroundImage =
						'url(http://h5.sino-sources.com/h5/2/img/03/bgc.png)'
				} else if (this.nowQuesNum == 4) {
					this.nowlist = this.queslist.d
					this.nowbg = this.bglist.d
					this.bgi = this.bgilist.d
					this.question = this.questionlist.d
					document.getElementById('content').style.backgroundImage =
						'url(http://h5.sino-sources.com/h5/2/img/04/bgd.png)'
				} else if (this.nowQuesNum == 5) {
					this.nowlist = this.queslist.e
					this.nowbg = this.bglist.e
					this.bgi = this.bgilist.e
					this.question = this.questionlist.e
					document.getElementById('content').style.backgroundImage =
						'url(http://h5.sino-sources.com/h5/2/img/05/bge.png)'
				} else if (this.nowQuesNum == 6) {
					this.nowlist = this.queslist.f
					this.nowbg = this.bglist.f
					this.bgi = this.bgilist.f
					this.question = this.questionlist.f
					document.getElementById('content').style.backgroundImage =
						'url(http://h5.sino-sources.com/h5/2/img/06/bgf.png)'
				} else if (this.nowQuesNum == 7) {
					this.nowlist = this.queslist.g
					this.nowbg = this.bglist.g
					this.bgi = this.bgilist.g
					this.question = this.questionlist.g
					document.getElementById('content').style.backgroundImage =
						'url(http://h5.sino-sources.com/h5/2/img/07/bgg.png)'
				} else if (this.nowQuesNum == 8) {
					this.nowlist = this.queslist.h
					this.nowbg = this.bglist.h
					this.bgi = this.bgilist.h
					this.question = this.questionlist.h
					document.getElementById('content').style.backgroundImage =
						'url(http://h5.sino-sources.com/h5/2/img/08/bgh.png)'
				} else {
					// 计算成绩并且跳转
					console.log('jisuan')
					let score = 0
					this.answlist.map(item => {
						score = score + item.score
					})
					console.log('fenshu', score)
					let grade = score >= 0 && score <= 3 ? 'a' : score >= 4 && score <= 6 ? 'b' : score >= 7 && score <=
						9 ? 'c' : score >= 10 && score <= 12 ? 'd' : score >= 13 && score <= 15 ? 'e' : score >= 16 &&
						score <= 18 ? 'f' : score >= 19 && score <= 21 ? 'g' : score >= 22 && score <= 24 ? 'e' : 'f'
					console.log('dengji', grade)
					uni.navigateTo({
						url: "/pages/paper/paper?grade=" + grade,
						fail(err) {
							console.log(err)
						}
					})
				}
				setTimeout(()=>{
					uni.hideLoading()
				},300)
			}
		}
	}
</script>

<style lang="scss">
	@keyframes rotatelogo {
		0% {
			transform: rotateZZ(0);
		}
	
		25% {
			transform: rotateZ(90deg);
		}
	
		50% {
			transform: rotateZ(180deg);
		}
	
		75% {
			transform: rotateZ(270deg);
		}
	
		100% {
			transform: rotateZ(360deg);
		}
	}
	
	@-webkit-keyframes rotatelogo {
		0% {
			transform: rotateZ(0);
		}
	
		25% {
			transform: rotateZ(90deg);
		}
	
		50% {
			transform: rotateZ(180deg);
		}
	
		75% {
			transform: rotateZ(270deg);
		}
	
		100% {
			transform: rotateZ(360deg);
		}
	}
	.content {
		width: 100%;
		min-height: 100vh;
		background: url('http://h5.sino-sources.com/h5/2/img/01/bga.png?x-oss-process=style/app') 0 center no-repeat;
		background-repeat: no-repeat;
		background-color: #4F00FC;
		background-size: 100vw 100vh;
		position: relative;
		padding-top: 10%;
		transition: all 0.1s;
		.stopmusic {
			width: 3em;
			height: 3em;
			position: absolute;
			right: 2%;
			top: 10%;
			animation: rotatelogo 3s linear infinite;
		}

		.topbtn {
			width: 100%;
			position: absolute;
			top: 2%;
			z-index: 9;
			padding-left: 2%;
			padding-right: 2%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.no {
				height: 52px;
				font-size: 40px;
				font-family: Impact;
				font-weight: 400;
				color: #B9B9B9;

				text {
					color: #7FF5D5;
				}
			}
		}

		.quebtn {
			width: 40%;
		}

		.mainact {
			width: 100%;
			position: relative;
		}

		image {
			width: 100%;
		}

		.question {
			width: 100%;
			font-size: 1.8em;
			font-family: HappyZcool;
			font-weight: normal;
			text-align: center;
			color: rgb(126, 245, 215);
			position: absolute;
			bottom: 32%;
			left: 50%;
			transform: translateX(-50%);
			justify-content: center;
			background: url(../../static/under.png) 0 bottom no-repeat;
			background-size: 100vw 1em;
			padding: 0 0.6em;
		}

		.queslist {
			width: 85%;
			height: 30%;
			position: absolute;
			bottom: 2%;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;

			image {
				width: 100%;
			}

		}
	}
</style>
